<template>
    <div class='aside-menu'>
        <div class="title">
            <img src="../assets/home.png" style="width: 30px; height: 30px;">
        </div>
        <el-menu :default-active="defaultIndex.toString()" class="el-menu-vertical-demo">
            <el-menu-item v-for="(item, index) in imageAarray" :index="index.toString()" :key="index"
                @click="HandleClick(index)">
                <img :src="defaultIndex == index ? item.selectedImageUrl : item.imageUrl">
                <span :class="{ active: defaultIndex == index }">{{ item.content }}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default {
    name: 'AsideMenu',
    components: {},
    data() {
        return {
            defaultIndex: 0,
            imageAarray: [
                {
                    imageUrl: require('../assets/dashboard2.png'),
                    selectedImageUrl: require('../assets/dashboard1.png'),
                    content: 'DashBoard',
                    route: '/'
                },
                {
                    imageUrl: require('../assets/devices2.png'),
                    selectedImageUrl: require('../assets/devices1.png'),
                    content: 'Devices',
                    route: '/future'
                },
                {
                    imageUrl: require('../assets/settings2.png'),
                    selectedImageUrl: require('../assets/settings1.png'),
                    content: 'Settings',
                    route: '/future'
                },
                {
                    imageUrl: require('../assets/exit2.png'),
                    selectedImageUrl: require('../assets/exit1.png'),
                    content: 'Exit',
                    route: '/future'
                }
            ],
        };
    },
    methods: {
        HandleClick(index) {
            console.log(index);
            const targetRoute = this.imageAarray[index].route;
            if (this.$route.path !== targetRoute) {
                this.defaultIndex = index;
                this.$router.push(targetRoute);
            }
        }

    },
    mounted() {

    },
}
</script>

<style scoped>
.aside-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.el-menu {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-grow: 1;
    border: 0;
}

.el-menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 60px;
    align-items: center;
    color: #9A9A9A;
}

.el-menu-item img {
    height: 20px;
    width: 20px;
}

.el-menu-item span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
}

.active {
    color: #7728F5;
}
</style>